<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css" id="css">
			*{margin: 0;padding: 0;}
			ul{list-style: none;}
			#click{
				width: 250px;
				height: 376px;
				/*background: url() no-repeat;*/
				background: white;
				background-size: 100% 100%;
				margin: 0 auto;
				position: relative;
			}
			#all{
				width: 180px;
				height: 180px;
				position: absolute;
				left: 32px;top: 132px;
				/*border: 1px solid #000;*/
			}
			#all ul.clickCon{
				width: 180px;
				height: 180px;
				border-radius: 50%;
				/*border: 1px solid #000;*/
			}
			#all ul.clickCon li{
				width: 2px;height: 2px;
				background: #000;
				position: absolute;
				left: 90px;top: 0;
				border-radius: 1px;
				transform-origin: center 90px;
			}
			#all ul.clickCon li:nth-of-type(5n+1){
				width: 4px;
				height: 4px;
				background: #00cc00;
				/*border: 1px solid #000;*/
				border-radius: 4px;
				margin-left: -2px;
			}
			#all ul.clickNum{
				width: 165px;
				height: 165px;
				position: absolute;
				left: 9px;top: 6px;
				border-radius: 50%;
				border: 1px solid #000;
			}
			#all ul.clickNum li{
				position: absolute;
				left: 75px;top: 0;
				font-size: 20px;
				color: #000;
				transform-origin: center 82px;
			}
			#all ul.clickNum li span{
				display: block;
			}
			#hours{
				width: 8px;
			    height: 53px;
			    background: black;
			    position: absolute;
			    left: 87px;
			    top: 49px;
			    transform-origin: 4px 38px;
			}
			#minutes{
				width: 6px;
			    height: 74px;
			    background: blue;
			    position: absolute;
			    left: 88px;
			    top: 30px;
			    transform-origin: 3px 58px;
			}
			#seconds{
				width: 4px;height: 90px;background: red;
				position: absolute;
				left: 89px;top: 15px;
				transform-origin:2px 75px;
			}
			#cirle{
				width: 18px;height: 18px;background: #3366FF;
				position: absolute;
				left: 81px;top: 81px;
				border-radius: 16px;
				transform-origin:;
			}
		</style>
	</head>
	<body>
		<div id="click">
			<div id="all">
				<ul class="clickCon"></ul>
				<ul class="clickNum"></ul>
				<!--<img id="hours" src="" alt="" width="25px" />
				<img id="minutes" src="" alt="" width="13px" />
				<img id="seconds" src="" alt="" width="7px" />
				<img id="cirle" src="" alt="" width="18px" />-->
				<div id="hours"></div>
				<div id="minutes"></div>
				<div id="seconds"></div>
				<div id="cirle"></div>
			</div>
		</div>
		<script type="text/javascript">
			var oul=document.getElementsByTagName("ul"),
			ocss=document.getElementById("css"),
			oli='',
			oli2='',
			csstext='';
			// 秒的刻度
			for(var i=0;i<60;i++){
				oli+="<li></li>";
				csstext+="ul.clickCon li:nth-of-type("+(i+1)+"){transform:rotate("+i*6+"deg)}";
			}
			ocss.innerHTML+=csstext;
			oul[0].innerHTML=oli;
			// 时的刻度
			for(var j=12;j>0;j--){
				oli2+="<li><span>"+j+"</span></li>";
				csstext+="ul.clickNum li:nth-of-type("+j+"){transform:rotate("+(13-j)*30+"deg)}";
				csstext+="ul.clickNum li:nth-of-type("+j+") span{transform:rotate("+-(13-j)*30+"deg)}";
			}
			var ohours=document.getElementById("hours");
			var omin=document.getElementById("minutes");
			var osec=document.getElementById("seconds");
			ocss.innerHTML+=csstext;
			oul[1].innerHTML=oli2;
			// 封装获取当前时间，并调整刻度
			function timenow(){
				var date=new Date();
				var seconds=date.getSeconds();
				var minutes=date.getMinutes()+seconds/60;
				var hours=date.getHours()+minutes/60;
				ohours.style.transform="rotate(+"+hours*30+"deg)";
				omin.style.transform="rotate(+"+minutes*6+"deg)";
				osec.style.transform="rotate(+"+seconds*6+"deg)";
			}
			timenow();
			timer=setInterval(timenow,1000);
		</script>
	</body>
</html>
